<template>
  <div class="innerbox">
    <div class="box-all" :style="canvasStyle" @mousedown="clickHandle">
      <div
        class="side left"
        :style="leftStyle"
        @mouseup="(e) => handledown(e, 'left')"
      >
        <div class="tip">左面</div>
        <DragBlock
          side="left"
          @drop="dragHandle"
          @dragover="dragoverHandle"
          :component="leftComponentList"
          shapeType="innerBox"
        />
      </div>
      <div
        class="side down"
        :style="downStyle"
        @mouseup="(e) => handledown(e, 'down')"
      >
        <div class="tip">底面</div>
        <DragBlock
          side="down"
          @drop="dragHandle"
          @dragover="dragoverHandle"
          :component="downComponentList"
          shapeType="innerBox"
        />
      </div>
      <div
        class="side right"
        :style="rightStyle"
        @mouseup="(e) => handledown(e, 'right')"
      >
        <div class="tip">右面</div>
        <DragBlock
          side="right"
          @drop="dragHandle"
          @dragover="dragoverHandle"
          :component="rightComponentList"
          shapeType="innerBox"
        />
      </div>
      <div
        class="side up"
        :style="upStyle"
        @mouseup="(e) => handledown(e, 'up')"
      >
        <div class="tip">顶面</div>
        <DragBlock
          side="up"
          @drop="dragHandle"
          @dragover="dragoverHandle"
          :component="upComponentList"
          shapeType="innerBox"
        />
      </div>
      <div
        class="side front"
        :style="frontStyle"
        @mouseup="(e) => handledown(e, 'front')"
      >
        <div class="tip">前面</div>
        <DragBlock
          side="front"
          @drop="dragHandle"
          @dragover="dragoverHandle"
          :component="frontComponentList"
          shapeType="innerBox"
        />
      </div>
      <div
        class="side back"
        :style="backStyle"
        data-set="s-back"
        @mouseup="(e) => handledown(e, 'back')"
      >
        <div class="tip">后面</div>
        <DragBlock
          side="back"
          @drop="dragHandle"
          @dragover="dragoverHandle"
          :component="backComponentList"
          shapeType="innerBox"
        />
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, computed } from "vue";
import editStore from "@/store/editStore.js";
import DragBlock from "./dragBlock.vue";
import { getUUID } from "@/utils/index";

const store = editStore();

let selectedComponent = computed(() => store.selectedComponent);
let canvasStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxLength * 2 + innerBox.boxHeigh * 2 + 40 + "px",
    height: innerBox.boxHeigh * 2 + innerBox.boxWidth + 40 + "px",
    transform: `scale(${innerBox.scale / 100})`,
  };
});
let leftStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxHeigh + "px",
    height: innerBox.boxWidth + "px",
    top: 20 + innerBox.boxHeigh + "px",
    left: 20 + "px",
  };
});
let downStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxLength + "px",
    height: innerBox.boxWidth + "px",
    top: 20 + innerBox.boxHeigh + "px",
    left: 20 + innerBox.boxHeigh + "px",
  };
});
let rightStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxHeigh + "px",
    height: innerBox.boxWidth + "px",
    top: 20 + innerBox.boxHeigh + "px",
    left: 20 + innerBox.boxHeigh + innerBox.boxLength + "px",
  };
});
let upStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxLength + "px",
    height: innerBox.boxWidth + "px",
    top: 20 + innerBox.boxHeigh + "px",
    left: 20 + innerBox.boxHeigh * 2 + innerBox.boxLength + "px",
  };
});
let backStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxLength + "px",
    height: innerBox.boxHeigh + "px",
    top: 20 + "px",
    left: 20 + innerBox.boxHeigh + "px",
  };
});
let frontStyle = computed(() => {
  let innerBox = store.innerBox;
  return {
    width: innerBox.boxLength + "px",
    height: innerBox.boxHeigh + "px",
    top: 20 + innerBox.boxHeigh + innerBox.boxWidth + "px",
    left: 20 + innerBox.boxHeigh + "px",
  };
});

let leftComponentList = computed(
  () => store.getCurrentInnerBox.leftComponentList
);
let downComponentList = computed(
  () => store.getCurrentInnerBox.downComponentList
);
let rightComponentList = computed(
  () => store.getCurrentInnerBox.rightComponentList
);
let upComponentList = computed(() => store.getCurrentInnerBox.upComponentList);
let frontComponentList = computed(
  () => store.getCurrentInnerBox.frontComponentList
);
let backComponentList = computed(
  () => store.getCurrentInnerBox.backComponentList
);

let boxSide = computed(() => {
  return {
    left: leftComponentList.value,
    down: downComponentList.value,
    right: rightComponentList.value,
    up: upComponentList.value,
    front: frontComponentList.value,
    back: backComponentList.value,
  };
});

const drag_key = "drag_key";
function dragHandle(e, type) {
  let drayDataString = e.dataTransfer.getData(drag_key);
  if (!drayDataString) return;
  let { offsetX, offsetY } = e;
  let materia = JSON.parse(drayDataString);
  materia.id = getUUID();
  materia.x = offsetX;
  materia.y = offsetY;
  materia.position = type;
  materia.reelType = 3;
  boxSide.value[type].push(materia);
  store.changeSelectedComponent(materia);
}

function dragoverHandle(e) {
  e.preventDefault();
  e.stopPropagation();
  if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
}

function clickHandle() {
  store.changeSelectedComponent({ id: "InnerBox", type: "InnerBox" });
}

function handledown(e, type) {
  let range = e.target.closest(".edit-range-model");
  if (!range) return;
  if (selectedComponent.value.position == type) return;
  let source = selectedComponent.value.position;
  let { offsetX, offsetY } = e;
  selectedComponent.value.x = offsetX;
  selectedComponent.value.y = offsetY;
  selectedComponent.value.position = type;
  moveSide(type, source, selectedComponent.value);
}

function moveSide(target, source, component) {
  boxSide.value[target]?.push(JSON.parse(JSON.stringify(component)));
  let sourceCompIndex = boxSide.value[source].indexOf(component);
  if (sourceCompIndex > -1) {
    boxSide.value[source].splice(sourceCompIndex, 1);
  }
}
</script>
<style scoped lang="scss">
.innerbox {
  flex: 1;
  overflow: auto;
  .box-all {
    margin-top: 20px;
    margin-left: 20px;
    transform-origin: 20px 20px;
    background-color: rgba(214, 220, 242, 0.4);
    position: relative;
    .side {
      position: absolute;
      outline: 1px dashed #eee;
      background-color: #904d15;
    }
    .tip {
      pointer-events: none;
      color: #999;
    }
  }
}
</style>
